var student=new Array();
var checkBox=new Array();
var page=1;//用于标记当前页码
var total_page;
var div1=document.getElementById('center_table');
//创建table
var table=document.createElement('table')
  div1.appendChild(table);
  table.border=1
  table.width='100%'
  table.height='100%'

//创建tbody
var tbody=document.createElement('tbody')
  table.appendChild(tbody)

function demo(){ 	
$.ajax({
	 type:'POST',
	 url:'/STUDENT/student',//工程名/servlet文件名
	 cache:false,
	 success:function(data){
		var str="";//不初始化的话1的前面会多一个undefined
		for(var i=0;i<data.length;i++){
			if(data[i]=="\n"){
				var arr=str.split(" ");//将含有空格分隔的字符串拆分为数组
				student.push(new message(arr[0],arr[1],arr[2],arr[3],arr[4],arr[5],arr[6],arr[7]));
				str="";
			}
			else
				str+=data[i];
		 }
		total_page=parseInt(((student.length-1)-(student.length-1)%10)/10+1);//取整
		//将学生的信息存到表格
		for(var i=0;i<student.length;i++){
		    var j=0;
		    tbody.insertRow(i)
		    tbody.rows[i].style.border="0px"
		    tbody.rows[i].style.height="20px"

		    tbody.rows[i].insertCell(j)
		    tbody.rows[i].cells[j++].appendChild(document.createTextNode(student[i].number1))

		    tbody.rows[i].insertCell(j)
		    tbody.rows[i].cells[j++].appendChild(document.createTextNode(student[i].number2))

		    tbody.rows[i].insertCell(j)
		    tbody.rows[i].cells[j++].appendChild(document.createTextNode(student[i].name))

		    tbody.rows[i].insertCell(j)
		    tbody.rows[i].cells[j++].appendChild(document.createTextNode(student[i].college))

		    tbody.rows[i].insertCell(j)
		    tbody.rows[i].cells[j++].appendChild(document.createTextNode(student[i].major))

		    tbody.rows[i].insertCell(j)
		    tbody.rows[i].cells[j++].appendChild(document.createTextNode(student[i].grade))

		    tbody.rows[i].insertCell(j)
		    tbody.rows[i].cells[j++].appendChild(document.createTextNode(student[i].cls))

		    tbody.rows[i].insertCell(j)
		    tbody.rows[i].cells[j++].appendChild(document.createTextNode(student[i].age))
		}
		show(0);
	 },
     error:function(error){
	   console.log(error);
	   }
	})	
	
}
//初始化学生信息
function message(number1,number2,name,college,major,grade,cls,age){
    this.number1=number1,
    this.number2=number2;
    this.name=name;
    this.college=college;
    this.major=major;
    this.grade=grade;
    this.cls=cls;
    this.age=age;
 }
//查询学生信息
function look(A)
{	
   var td=A.parentNode;
   var tr=td.parentNode;
   var div1=document.getElementById("center_table");
       div1.innerHTML="";
   var div2=document.createElement("div");
       div2.style.paddingTop="100px"
       div2.style.marginLeft="200px"

   var bt=document.createElement("button");
       bt.innerText="取消"//按钮上的字
       bt.style.cssText='height:30px;width:80px'
       bt.style.backgroundColor="orange"
       bt.style.marginLeft="100px"

   var p1=document.createElement("p");
   var p2=document.createElement("p");
   var p3=document.createElement("p");
   var p4=document.createElement("p");
   var p5=document.createElement("p");
   var p6=document.createElement("p");
   var p7=document.createElement("p");
  
   var text1=document.createElement("input") 
   var text2=document.createElement("input") 
   var text3=document.createElement("input") 
   var text4=document.createElement("input") 
   var text5=document.createElement("input") 
   var text6=document.createElement("input") 
   var text7=document.createElement("input") 
   
   var str1=document.createTextNode("学号:") 
   var str2=document.createTextNode("姓名:")
   var str3=document.createTextNode("学院:") 
   var str4=document.createTextNode("专业:")
   var str5=document.createTextNode("年级:") 
   var str6=document.createTextNode("班级:")
   var str7=document.createTextNode("年龄:") 
   
   text1.setAttribute("type","text");
   text2.setAttribute("type","text");
   text3.setAttribute("type","text");
   text4.setAttribute("type","text");
   text5.setAttribute("type","text");
   text6.setAttribute("type","text");
   text7.setAttribute("type","text");
   
   //设置text里面的字只能看，不能修改
   text1.placeholder=tr.cells[2].innerHTML;
   text2.placeholder=tr.cells[3].innerHTML;
   text3.placeholder=tr.cells[4].innerHTML;
   text4.placeholder=tr.cells[5].innerHTML;
   text5.placeholder=tr.cells[6].innerHTML;
   text6.placeholder=tr.cells[7].innerHTML;
   text7.placeholder=tr.cells[8].innerHTML;
  
   p1.appendChild(str1)
   p1.appendChild(text1)
   p2.appendChild(str2)
   p2.appendChild(text2)
   p3.appendChild(str3)
   p3.appendChild(text3)
   p4.appendChild(str4)
   p4.appendChild(text4)
   p5.appendChild(str5)
   p5.appendChild(text5)
   p6.appendChild(str6)
   p6.appendChild(text6)
   p7.appendChild(str7)
   p7.appendChild(text7)

   div2.appendChild(p1)
   div2.appendChild(p2)
   div2.appendChild(p3)
   div2.appendChild(p4)
   div2.appendChild(p5)
   div2.appendChild(p6)
   div2.appendChild(p7)
   div2.appendChild(bt);

   div1.appendChild(div2);
   bt.onclick=function(){
       show(0);   
   }
}

//修改学生信息
function modify(A){
   var td=A.parentNode;
   var tr=td.parentNode;
   
   var div1=document.getElementById("center_table");
       div1.innerHTML="";

   var div2=document.createElement("div");
       div2.style.paddingTop="100px"
       div2.style.marginLeft="200px"

   var bt1=document.createElement("button");
       bt1.innerText="保存"
       bt1.style.cssText='height:30px;width:60px'
       bt1.style.backgroundColor="orange"
       bt1.style.marginLeft="20px"

   var bt2=document.createElement("button");
       bt2.innerText="取消"
       bt2.style.cssText='height:30px;width:60px'
       bt2.style.backgroundColor="orange"
       bt2.style.marginLeft="30px"

   var p1=document.createElement("p");
   var p2=document.createElement("p");
   var p3=document.createElement("p");
   var p4=document.createElement("p");
   var p5=document.createElement("p");
   var p6=document.createElement("p");
   var p7=document.createElement("p");
  
   var text1=document.createElement("input") 
   var text2=document.createElement("input") 
   var text3=document.createElement("input") 
   var text4=document.createElement("input") 
   var text5=document.createElement("input") 
   var text6=document.createElement("input") 
   var text7=document.createElement("input") 
   
   var str1=document.createTextNode("学号:") 
   var str2=document.createTextNode("姓名:")
   var str3=document.createTextNode("学院:") 
   var str4=document.createTextNode("专业:")
   var str5=document.createTextNode("年级:") 
   var str6=document.createTextNode("班级:")
   var str7=document.createTextNode("年龄:") 
   
   text1.setAttribute("type","text");
   text2.setAttribute("type","text");
   text3.setAttribute("type","text");
   text4.setAttribute("type","text");
   text5.setAttribute("type","text");
   text6.setAttribute("type","text");
   text7.setAttribute("type","text");

   text1.value=tr.cells[2].innerHTML;
   text2.value=tr.cells[3].innerHTML;
   text3.value=tr.cells[4].innerHTML;
   text4.value=tr.cells[5].innerHTML;
   text5.value=tr.cells[6].innerHTML;
   text6.value=tr.cells[7].innerHTML;
   text7.value=tr.cells[8].innerHTML;
   

   p1.appendChild(str1)
   p1.appendChild(text1)
   p2.appendChild(str2)
   p2.appendChild(text2)
   p3.appendChild(str3)
   p3.appendChild(text3)
   p4.appendChild(str4)
   p4.appendChild(text4)
   p5.appendChild(str5)
   p5.appendChild(text5)
   p6.appendChild(str6)
   p6.appendChild(text6)
   p7.appendChild(str7)
   p7.appendChild(text7)

   div2.appendChild(p1)
   div2.appendChild(p2)
   div2.appendChild(p3)
   div2.appendChild(p4)
   div2.appendChild(p5)
   div2.appendChild(p6)
   div2.appendChild(p7)
   div2.appendChild(bt1);
   div2.appendChild(bt2);

   div1.appendChild(div2);
  
   bt1.onclick=function(){
      var number=tr.cells[1].innerHTML;//号数
    
      student[number].number2= text1.value
      student[number].name   = text2.value
      student[number].college= text3.value
      student[number].major  = text4.value
      student[number].grade  = text5.value
      student[number].cls    = text6.value
      student[number].age    = text7.value
      $.ajax({  
          type : 'POST',  
          url:'/STUDENT/student',  
          DataType : "json" ,//接收服务器的时候的数据类型
          //contentType:"application/json",//传输过去的时候的数据类型//加了以后传过去就是null
          async:false,
          cache:false,
          data:{"key":JSON.stringify(student)},//传递一个对象数组到后台
          success:function(data) {  
            console.log("success");
          } ,
          error:function(error){
      	   console.log(error);
          }
      });
    
      show(0)
   }
    bt2.onclick=function(){
       show(0); 
   }
}

//将学生的信息增加

function add_message()
 {
    var a=student.length;
    var b=document.getElementById("t1").value;
    var c=document.getElementById("t2").value;
    var d=document.getElementById("t3").value;
    var e=document.getElementById("t4").value;
    var f=document.getElementById("t5").value;
    var g=document.getElementById("t6").value;
    var h=document.getElementById("t7").value;
    
    var j=0;
    student.push(new message(a,b,c,d,e,f,g,h));
   
    p1=document.createElement("p")
    p2=document.createElement("p")
    p1.innerHTML="查看"
    p2.innerHTML="修改"
    p1.style.color="red"
    p2.style.color="red"

      checkBox[a-1]=document.createElement("input");
      checkBox[a-1].setAttribute("type","checkbox");
   
    tbody.insertRow(a-1)
    tbody.rows[a-1].style.border="0px"
    tbody.rows[a-1].style.height="20px"

    tbody.rows[a-1].insertCell(j)
    tbody.rows[a-1].cells[j++].appendChild(checkBox[a-1])
    checkBox[a-1].id='checkBox'+(a-1)


    tbody.rows[a-1].insertCell(j)
    tbody.rows[a-1].cells[j++].appendChild(document.createTextNode(student[a-1].number1))

    tbody.rows[a-1].insertCell(j)
    tbody.rows[a-1].cells[j++].appendChild(document.createTextNode(student[a-1].number2))

    tbody.rows[a-1].insertCell(j)
    tbody.rows[a-1].cells[j++].appendChild(document.createTextNode(student[a-1].name))

    tbody.rows[a-1].insertCell(j)
    tbody.rows[a-1].cells[j++].appendChild(document.createTextNode(student[a-1].college))

    tbody.rows[a-1].insertCell(j)
    tbody.rows[a-1].cells[j++].appendChild(document.createTextNode(student[a-1].major))

    tbody.rows[a-1].insertCell(j)
    tbody.rows[a-1].cells[j++].appendChild(document.createTextNode(student[a-1].grade))

    tbody.rows[a-1].insertCell(j)
    tbody.rows[a-1].cells[j++].appendChild(document.createTextNode(student[a-1].cls))

    tbody.rows[a-1].insertCell(j)
    tbody.rows[a-1].cells[j++].appendChild(document.createTextNode(student[a-1].age))

    tbody.rows[a-1].insertCell(j)
    tbody.rows[a-1].cells[j++].appendChild(p1)
    p1.onclick=function(){
         look(this);
    }
    tbody.rows[a-1].insertCell(j)
    tbody.rows[a-1].cells[j++].appendChild(p2)
    p2.onclick=function(){
         modify(this);
    }
    //将添加学生以后的数组传给后台，再写进文件
    
    $.ajax({  
        type : 'POST',  
        url:'/STUDENT/student',  
        DataType : "json" ,//接收服务器的时候的数据类型
        async:false,
        cache:false,
        data:{"key":JSON.stringify(student)},//传递一个对象数组到后台
        success:function(data) {  
          console.log("success");
        } ,
        error:function(error){
    	   console.log(error);
        }
    });
 }
//新增学生
function Add(){
     var div1=document.getElementById('center_table');
     document.getElementById('center_table').innerHTML="";
     div2=document.createElement("div");
     div1.appendChild(div2)
     div2.style.cssText="height:300px;width:200px"
     div2.style.paddingTop="100px"
     div2.style.marginLeft="200px"
     div1.style.backgroundColor="white"

     var text1 = document.createElement("input");
     var text2 = document.createElement("input");
     var text3 = document.createElement("input");
     var text4 = document.createElement("input");
     var text5= document.createElement("input");
     var text6 = document.createElement("input");
     var text7 = document.createElement("input");

     text1.id="t1";
     text2.id="t2";
     text3.id="t3";
     text4.id="t4";
     text5.id="t5";
     text6.id="t6";
     text7.id="t7";


     text1.setAttribute("type","text");
     text2.setAttribute("type","text");
     text3.setAttribute("type","text");
     text4.setAttribute("type","text");
     text5.setAttribute("type","text");
     text6.setAttribute("type","text");
     text7.setAttribute("type","text");
    
    text1.style.cssText='height:25px;width:235px;margin:10px'
    text2.style.cssText='height:25px;width:235px;margin:10px'
    text3.style.cssText='height:25px;width:235px;margin:10px'
    text4.style.cssText='height:25px;width:235px;margin:10px'
    text5.style.cssText='height:25px;width:235px;margin:10px'
    text6.style.cssText='height:25px;width:235px;margin:10px'
    text7.style.cssText='height:25px;width:235px;margin:10px'

    text1.placeholder="学号"
    text2.placeholder="姓名"
    text3.placeholder="学院"
    text4.placeholder="专业"
    text5.placeholder="年级"
    text6.placeholder="班级"
    text7.placeholder="年龄"
    
     div2.appendChild(text1)
     div2.appendChild(text2)
     div2.appendChild(text3)
     div2.appendChild(text4)
     div2.appendChild(text5)
     div2.appendChild(text6)
     div2.appendChild(text7)

     
     var bt1= document.createElement("input");
     var bt2 = document.createElement("input");

     bt1.setAttribute("type","button");
     bt2.setAttribute("type","button");

     bt1.value="提交"
     bt1.style.cssText='20px;height:30px;width:80px'
     bt1.style.marginLeft="10px"
     bt1.style.backgroundColor="orange"
     bt1.style.float="left"
     
     bt2.value="取消"
     bt2.style.cssText='20px;height:30px;width:80px'
     bt2.style.backgroundColor="orange"
     bt2.style.float="right"

     div2.appendChild(bt1)
     div2.appendChild(bt2)

     bt1.onclick=function(){
        add_message();
        page_last();
     }   
     bt2.onclick=function(){
         page_first();
     }
     div1.appendChild(div2)
}
//删除学生信息
function Delete(){
   total_page=parseInt(((student.length-1)-(student.length-1)%10)/10+1);//每次更新页数
   if(document.getElementById('checkBox'+0).checked)//chechBox如果是打了勾的话，checked为true
   {
     var r=confirm("确定全部删除？")
     if(r==true){
       student.splice((page-1)*10+1,10);//从下标为1的地方往后删除10个
       $.ajax({  
           type : 'POST',  
           url:'/STUDENT/student',  
           DataType : "json" ,//接收服务器的时候的数据类型
           async:false,
           cache:false,
           data:{"key":JSON.stringify(student)},//传递一个对象数组到后台
           success:function(data) {  
             console.log("success");
           } ,
           error:function(error){
       	   console.log(error);
           }
       });
       show((page-1)*10);
     }
   }
   if(page<total_page){
   for(var i=10;i>=1;i--){
       var k=document.getElementById('checkBox'+i)
       if(k.checked){
           student.splice((page-1)*10+i,1);
           for(var j=(page-1)*10+i;j<student.length;j++)
        	   student[j].number1--;
         }
       }
           $.ajax({  
               type : 'POST',  
               url:'/STUDENT/student',  
               DataType : "json" ,//接收服务器的时候的数据类型
               //contentType:"application/json",//传输过去的时候的数据类型//加了以后传过去就是null
               async:false,
               cache:false,
               data:{"key":JSON.stringify(student)},//传递一个对象数组到后台
               success:function(data) {  
                 console.log("success");
               } ,
               error:function(error){
           	   console.log(error);
               }
           });
        show((page-1)*10);
   }
    else {//最后一页的删除
       for(var i=(student.length)%10-1;i>=1;i--){
       var k=document.getElementById('checkBox'+i)
       if(k.checked){
           student.splice((page-1)*10+i,1)
           for(var j=(page-1)*10+i;j<student.length;j++)
        	   student[j].number1--;
          }
       }
   
           $.ajax({  
               type : 'POST',  
               url:'/STUDENT/student',  
               DataType : "json" ,//接收服务器的时候的数据类型
               /*contentType:"application/json",//传输过去的时候的数据类型//加了以后传过去就是null
       */      async:false,
               cache:false,
               data:{"key":JSON.stringify(student)},//传递一个对象数组到后台
               success:function(data) {  
                 console.log("success");
               } ,
               error:function(error){
           	   console.log(error);
               }
           });
            show((page-1)*10);
       
       }
     
    }
    


//上一页
function page_up(){
    for(var i=1;i<=total_page;i++){
        if(page==1){
            page_first();
            page=1;
        }
        else if(page==i){
          page--;
          show((page-1)*10);
        }
     }
}
//下一页
function page_down(){
     for(var i=total_page;i>0;i--){
         if(page==total_page){
            page_last();
            page=total_page;
         }
        else if(page==i){
            show(page*10);
            page++;
        }
     }
}

//第一页
function page_first(){
    show(0)
    page=1;
}

//最后一页
function page_last(){
	total_page=parseInt(((student.length-1)-(student.length-1)%10)/10+1);//取整
    show((total_page-1)*10)   
       page=total_page;
}

//显示10个学生信息
function show(k){
     var div1=document.getElementById('center_table');
         document.getElementById("center_table").innerHTML = "";//清空这个div

     var table2=document.createElement('table')
         table2.border=1
         table2.width='100%'
         table2.height='100%'

     var tbody=document.createElement('tbody')
         table2.appendChild(tbody)
         div1.appendChild(table2);

     //用于记录显示的学生的个数
     var count=0;
     var p1=new Array();
     var p2=new Array();
     for(var i=0;i<student.length;i++){
        
             p1[i]=document.createElement("p")
             p2[i]=document.createElement("p")
             p1[i].innerHTML="查看"
             p2[i].innerHTML="修改"
             p1[i].style.color="red"
             p2[i].style.color="red"

             checkBox[i]=document.createElement("input");
             checkBox[i].setAttribute("type","checkbox");
             
     
         //第一行
         if(i==0&&k!=0){
             var j=0;
             tbody.insertRow(0)

             tbody.rows[0].style.border="0px"
             tbody.rows[0].style.height="20px"

             tbody.rows[0].insertCell(j)
             tbody.rows[0].cells[j++].appendChild(checkBox[0])
             checkBox[0].id='checkBox'+0
            
             tbody.rows[0].insertCell(j)
             tbody.rows[0].cells[j++].appendChild(document.createTextNode(student[i].number1))

             tbody.rows[0].insertCell(j)
             tbody.rows[0].cells[j++].appendChild(document.createTextNode(student[i].number2))

             tbody.rows[0].insertCell(j)
             tbody.rows[0].cells[j++].appendChild(document.createTextNode(student[i].name))

             tbody.rows[0].insertCell(j)
             tbody.rows[0].cells[j++].appendChild(document.createTextNode(student[i].college))

             tbody.rows[0].insertCell(j)
             tbody.rows[0].cells[j++].appendChild(document.createTextNode(student[i].major))

             tbody.rows[0].insertCell(j)
             tbody.rows[0].cells[j++].appendChild(document.createTextNode(student[i].grade))

             tbody.rows[0].insertCell(j)
             tbody.rows[0].cells[j++].appendChild(document.createTextNode(student[i].cls))

             tbody.rows[0].insertCell(j)
             tbody.rows[0].cells[j++].appendChild(document.createTextNode(student[i].age))

             tbody.rows[0].insertCell(j)
             tbody.rows[0].cells[j++].appendChild(document.createTextNode("操作"))

             tbody.rows[0].insertCell(j)
             tbody.rows[0].cells[j++].appendChild(document.createTextNode("操作"))
        }
        if(i<=k&&k!=0)
            continue;

         //序号为1-10的学生
         if(k==0&&i==11)
             break
        //第一行不算一个学生
        if(k==0)
            count--;
        j=0;
        tbody.insertRow(i-k)

        tbody.rows[i-k].style.border="0px"
        tbody.rows[i-k].style.height="20px"

        tbody.rows[i-k].insertCell(j)
        tbody.rows[i-k].cells[j++].appendChild(checkBox[i-k])
        checkBox[i-k].id='checkBox'+(i-k)
         
        tbody.rows[i-k].insertCell(j)
        tbody.rows[i-k].cells[j++].appendChild(document.createTextNode(student[i].number1))

        tbody.rows[i-k].insertCell(j)
        tbody.rows[i-k].cells[j++].appendChild(document.createTextNode(student[i].number2))

        tbody.rows[i-k].insertCell(j)
        tbody.rows[i-k].cells[j++].appendChild(document.createTextNode(student[i].name))

        tbody.rows[i-k].insertCell(j)
        tbody.rows[i-k].cells[j++].appendChild(document.createTextNode(student[i].college))

        tbody.rows[i-k].insertCell(j)
        tbody.rows[i-k].cells[j++].appendChild(document.createTextNode(student[i].major))

        tbody.rows[i-k].insertCell(j)
        tbody.rows[i-k].cells[j++].appendChild(document.createTextNode(student[i].grade))

        tbody.rows[i-k].insertCell(j)
        tbody.rows[i-k].cells[j++].appendChild(document.createTextNode(student[i].cls))

        tbody.rows[i-k].insertCell(j)
        tbody.rows[i-k].cells[j++].appendChild(document.createTextNode(student[i].age))
     
        if(k==0&&i==0){
            tbody.rows[i-k].insertCell(j)
            tbody.rows[i-k].cells[j++].appendChild(document.createTextNode("操作"))

            tbody.rows[i-k].insertCell(j)
            tbody.rows[i-k].cells[j++].appendChild(document.createTextNode("操作"))
        }
         else
         {
             tbody.rows[i-k].insertCell(j)
             tbody.rows[i-k].cells[j++].appendChild(p1[i-k])
             p1[i-k].onclick=function(){
                look(this);
             }
             tbody.rows[i-k].insertCell(j)
             tbody.rows[i-k].cells[j++].appendChild(p2[i-k])
             p2[i-k].onclick=function(){
                modify(this);
            }
         }
            
        count++;
        if(count==10)
            break
    }  
}
